<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">槐佳辉的博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../static/css/my.css" th:href="@{/css/my.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <!--animate动画css引入-->
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <style>
        body {
            width: 100%;
            height: 100vh;
            background-color:#000;
            background-image: radial-gradient(circle at top right, rgba(15, 7, 14, 0.83), #0f070e),
            radial-gradient(circle at 20% 80%, rgba(15, 7, 14, 0.67), #0f070e);
        }
        canvas {
            position: fixed;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<!--导航-->
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini">
    <div class="ui container">
        <!--手机端(页面缩小)stackable可堆叠   mobile reversed -->
        <div class="ui inverted aligned secondary stackable menu">
            <a class="ui m-text-highlight teal header item">管理后台</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i> 博客</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i> 分类</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="tags icon"></i> 标签</a>
            <div class="right m-mobile-hide menu">
                <div class="ui dropdown item">
                    <div class="text">
                        <img src="../../static/images/headpage.gif" class="ui avatar image m-margin-tb-right">槐佳辉
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <img src="../../static/images/headpage.gif" class="ui avator image">槐佳辉
                        <a href="#" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top">
        <i class="sidebar icon m-mobile-show"></i>
    </a>
</nav>
    <div class="ui container">
        <!--手机端(页面缩小)stackable可堆叠 active为当前选中  mobile reversed -->
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">HuiBlog</h2>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i> 首页</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i> 分类</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="tags icon "></i> 标签</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'"><i class="tags icon "></i> 归档</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'"><i class="info icon"></i>关于我</a>
            <div class="right item">
                <div class="ui icon transparent  input">
                    <input type="text" class="m-text-write" placeholder="搜索...">
                    <i class="search icon inverted"></i>

                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top">
        <i class="sidebar icon m-mobile-show"></i>
    </a>
</nav>


<!--底部footer-->
<FOOTER th:fragment="footer" id="finally" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui divided stackable inverted grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-opacity-min">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事：</a>
                    <a href="#" class="item">用户故事：</a>
                    <a href="#" class="item">用户故事：</a>

                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-opacity-min">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email: 1748756566@qq.com</a>
                    <a href="#" class="item">QQ: 1748756566</a>
                    <a href="#" class="item">微信： BXY4543</a>

                </div>
            </div>
            <div class="five wide column">
                <h4 class="ui inverted header m-opacity-min">介绍</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">我的个人博客 ： hello，world</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright 2019-2020 MyBlog</p>
    </div>

</FOOTER>

<th:block th:fragment="script">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <!--设置滚动位置: flesler/jquery.scrollTo   github-->
    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
    <script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
    <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
    <script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
    <!--特效 script-->
    <script>
        const STAR_COUNT = ( window.innerWidth + window.innerHeight ) / 8,
            STAR_SIZE = 3,
            STAR_MIN_SCALE = 0.2,
            OVERFLOW_THRESHOLD = 50;

        const canvas = document.querySelector( 'canvas' ),
            context = canvas.getContext( '2d' );

        let scale = 1, // device pixel ratio
            width,
            height;

        let stars = [];

        let pointerX,
            pointerY;

        let velocity = { x: 0, y: 0, tx: 0, ty: 0, z: 0.0005 };

        let touchInput = false;

        generate();
        resize();
        step();

        window.onresize = resize;
        canvas.onmousemove = onMouseMove;
        canvas.ontouchmove = onTouchMove;
        canvas.ontouchend = onMouseLeave;
        document.onmouseleave = onMouseLeave;

        function generate() {

            for( let i = 0; i < STAR_COUNT; i++ ) {
                stars.push({
                    x: 0,
                    y: 0,
                    z: STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE )
                });
            }

        }

        function placeStar( star ) {

            star.x = Math.random() * width;
            star.y = Math.random() * height;

        }

        function recycleStar( star ) {

            let direction = 'z';

            let vx = Math.abs( velocity.x ),
                vy = Math.abs( velocity.y );

            if( vx > 1 || vy > 1 ) {
                let axis;

                if( vx > vy ) {
                    axis = Math.random() < vx / ( vx + vy ) ? 'h' : 'v';
                }
                else {
                    axis = Math.random() < vy / ( vx + vy ) ? 'v' : 'h';
                }

                if( axis === 'h' ) {
                    direction = velocity.x > 0 ? 'l' : 'r';
                }
                else {
                    direction = velocity.y > 0 ? 't' : 'b';
                }
            }

            star.z = STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE );

            if( direction === 'z' ) {
                star.z = 0.1;
                star.x = Math.random() * width;
                star.y = Math.random() * height;
            }
            else if( direction === 'l' ) {
                star.x = -OVERFLOW_THRESHOLD;
                star.y = height * Math.random();
            }
            else if( direction === 'r' ) {
                star.x = width + OVERFLOW_THRESHOLD;
                star.y = height * Math.random();
            }
            else if( direction === 't' ) {
                star.x = width * Math.random();
                star.y = -OVERFLOW_THRESHOLD;
            }
            else if( direction === 'b' ) {
                star.x = width * Math.random();
                star.y = height + OVERFLOW_THRESHOLD;
            }

        }

        function resize() {

            scale = window.devicePixelRatio || 1;

            width = window.innerWidth * scale;
            height = window.innerHeight * scale;

            canvas.width = width;
            canvas.height = height;

            stars.forEach( placeStar );

        }

        function step() {

            context.clearRect( 0, 0, width, height );

            update();
            render();

            requestAnimationFrame( step );

        }

        function update() {

            velocity.tx *= 0.96;
            velocity.ty *= 0.96;

            velocity.x += ( velocity.tx - velocity.x ) * 0.8;
            velocity.y += ( velocity.ty - velocity.y ) * 0.8;

            stars.forEach( ( star ) => {

                star.x += velocity.x * star.z;
                star.y += velocity.y * star.z;

                star.x += ( star.x - width/2 ) * velocity.z * star.z;
                star.y += ( star.y - height/2 ) * velocity.z * star.z;
                star.z += velocity.z;

                // recycle when out of bounds
                if( star.x < -OVERFLOW_THRESHOLD || star.x > width + OVERFLOW_THRESHOLD || star.y < -OVERFLOW_THRESHOLD || star.y > height + OVERFLOW_THRESHOLD ) {
                    recycleStar( star );
                }

            } );

        }

        function render() {

            stars.forEach( ( star ) => {

                context.beginPath();
                context.lineCap = 'round';
                context.lineWidth = STAR_SIZE * star.z * scale;
                context.strokeStyle = 'rgba(255,255,255,'+(0.5 + 0.5*Math.random())+')';

                context.beginPath();
                context.moveTo( star.x, star.y );

                var tailX = velocity.x * 2,
                    tailY = velocity.y * 2;

                // stroke() wont work on an invisible line
                if( Math.abs( tailX ) < 0.1 ) tailX = 0.5;
                if( Math.abs( tailY ) < 0.1 ) tailY = 0.5;

                context.lineTo( star.x + tailX, star.y + tailY );

                context.stroke();

            } );

        }

        function movePointer( x, y ) {

            if( typeof pointerX === 'number' && typeof pointerY === 'number' ) {

                let ox = x - pointerX,
                    oy = y - pointerY;

                velocity.tx = velocity.tx + ( ox / 8*scale ) * ( touchInput ? 1 : -1 );
                velocity.ty = velocity.ty + ( oy / 8*scale ) * ( touchInput ? 1 : -1 );

            }

            pointerX = x;
            pointerY = y;

        }

        function onMouseMove( event ) {

            touchInput = false;

            movePointer( event.clientX, event.clientY );

        }

        function onTouchMove( event ) {

            touchInput = true;

            movePointer( event.touches[0].clientX, event.touches[0].clientY, true );

            event.preventDefault();

        }

        function onMouseLeave() {

            pointerX = null;
            pointerY = null;

        }
    </script>

</th:block>
</body>
</html>